<template>
  <div class="page-wrapper flex-vertical">
    <div class="app-container fill">
      <VForm :formData="formData" @submit="submit" :form="value"></VForm>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'PageHome' })
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';
import {articlesAdd, informationsEdit, informationsList, tagsList} from '@/api/index';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
const router = useRouter();
const route = useRoute();
const form = ref({})
onMounted(()=>{
  informationsList().then(res=>{
    console.log('res',res)
    if(res.data.avatar){
      res.data.avatar = [res.data.avatar]
      value.value = res.data;
    }
    
  });

})
const value = ref()
const formData = ref([
  {
    tag:'el-input',
    label:'名称',
    prop:'blog_name',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'VUpload',
    label:'头像',
    prop:'avatar',
    placeholder:'请选择',
    bind:{
      limit:1
    },
    rules:[
      { required:true, message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'el-input',
    label:'个性签名',
    prop:'personal_signature',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'el-input',
    label:'人生誓言',
    prop:'motto',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
  {
    tag:'el-input',
    label:'首页提示',
    prop:'tips',
    rules:[
      { required:true, message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'VMarkDown',
    label:'内容',
    prop:'aboutMe',
    placeholder:'请输入',
    rules:[
      { required:true, message: '请输入', trigger: 'blur' },
    ]
  },
]);

const submit = (form)=>{
  console.log('form',form);
  let params = JSON.parse(JSON.stringify(form));
  params.html = xss.process(VueMarkdownEditor.vMdParser.themeConfig.markdownParser.render(params.aboutMe));
  if(params.avatar){
    params.avatar = params.avatar.map(i=>i.id).join(',');
  }
  informationsEdit(params).then(res=>{
    ElMessage.success("提交成功");
  })
}
</script>

<style scoped>

</style>